<template>
  <div class="layout">
    <div :class="isActive ? 'layout-item active' : 'layout-item'">
      <div class="layout-header" @click="openContent">
        <div class="icon-triangle"></div>
        <div class="title">{{ title }}</div>
      </div>
      <div class="layout-content">
        <div class="layout-type">
          <!-- :model="model" :rules="rules" -->
          <el-form
            class="basic-info-content"
            label-width="82px"
            :model="model"
            ref="refAnnoType"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="标注类型"
                  prop="annoType"
                  :rules="[{ required: true, message: '请选择' }]"
                >
                  <el-cascader
                    :disabled="isEdit && isStopOrOn"
                    v-model="model.annoType"
                    :value="model.annoType"
                    placeholder="请选择"
                    :options="lesionGroups"
                    :props="{
                      multiple: true,
                      value: 'value',
                      label: 'name',
                      children: 'childs',
                    }"
                    @change="handleChange"
                  >
                    <template #default="{ node, data }">
                      <span>{{ data.name }}</span>
                      <span v-if="!node.isLeaf"> ({{ data.childs.length }}) </span>
                    </template>
                  </el-cascader>
                </el-form-item>
              </el-col>
            </el-row>
            <el-table :data="lesionList" style="width: 100%">
              <el-table-column label="序号" type="index"> </el-table-column>

              <el-table-column label="标注类型">
                <!-- #default="{node, data }"> -->
                <template #default="scope">
                  <span>{{ scope.row.name }}</span>
                </template>
              </el-table-column>

              <el-table-column label="选择颜色">
                <template #default="scope">
                  <div class="color-container">
                    <span
                      class="color"
                      :style="{ backgroundColor: scope.row.color }"
                    ></span>
                    <el-color-picker
                      :disabled="isEdit && isStopOrOn"
                      v-model="scope.row.color"
                      :value="scope.row.color"
                      @change="(value) => changeColor(scope.$index, value)"
                    ></el-color-picker>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="标注工具">
                <template #default="scope">
                  <el-row>
                    <el-col :span="24">
                      <el-select
                        :disabled="isEdit && isStopOrOn"
                        :filter-method="
                          (value) => filtermethod(value, scope.$index, scope.row)
                        "
                        @visible-change="
                          (visible) =>
                            visibleChangeImageTools(visible, scope.$index, scope.row)
                        "
                        @change="changeImageTools(scope.$index)"
                        multiple
                        v-model="scope.row.toolValueList"
                        filterable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in handleImageTools(
                            scope.$index,
                            scope.row.toolOptions
                          )"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>

              <el-table-column label="标注组件">
                <template #default="scope">
                  <el-row>
                    <el-col :span="24">
                      <select-table-page
                        :disabled="isEdit && isStopOrOn"
                        :ref="'refImageFcList' + scope.$index"
                        placeholder="标注组件"
                        v-model="scope.row.imageFcListValues"
                        :value="scope.row.imageFcListValues"
                        :data="{
                          list: handleSeriesFcListData(
                            scope.$index,
                            scope.row.imageFcListOptions
                          ),
                          total: scope.row.imageFcListTotal,
                        }"
                        :remote-method="
                          (opts) => setImageFcListOptions(opts, scope.$index)
                        "
                        key-name="id"
                        value-name="name"
                        :collapseTags="false"
                        :multiple="true"
                        @change="
                          (imageFcListValues) =>
                            changeImageFcListValues(
                              imageFcListValues,
                              scope.$index,
                              scope.row
                            )
                        "
                      ></select-table-page>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column label="病灶设置">
                <template #default="scope">
                  <el-row>
                    <el-col :span="24">
                      <el-select
                        :disabled="isEdit && isStopOrOn"
                        v-model="scope.row.bizType"
                        placeholder="请选择"
                        @change="(value) => handleBizTypeChange(value, scope.$index)"
                      >
                        <el-option
                          v-for="item in scope.row.lesionBizTypes"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column>
              <!-- <el-table-column label="AI">
                <template #default="scope">
                  <el-row>
                    <el-col :span="24">
                      <el-select
                        :disabled="isEdit && isStopOrOn"
                        v-model="scope.row.AI"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in AIList"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id"
                        ></el-option>
                      </el-select>
                    </el-col>
                  </el-row>
                </template>
              </el-table-column> -->

              <el-table-column label="操作">
                <template #default="scope">
                  <div class="handle">
                    <el-button size="mini" @click="checkImageFcList(scope)"
                      >查看组件</el-button
                    >
                    <el-button
                      class="remove"
                      size="mini"
                      :disabled="isEdit && isStopOrOn"
                      @click="del(scope)"
                      >删除</el-button
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
    </div>

    <div v-for="(row, $index) in lesionList" :key="$index">
      <el-dialog
        title="查看已添加的标注数据"
        width="780px"
        class="el-dialog-style"
        center
        v-model="row.visible"
        :show-close="false"
      >
        <el-table
          :data="row.imageFcListData"
          style="width: 100%"
          stripe
          row-key="id"
          :ref="`refTable${$index}`"
          el-table-new
        >
          <el-table-column label="排序" width="54" center class="el-table-column-sort">
            <template #default="scope">
              <div class="sort">
                <div class="iconfont icon-shangxiayidong"></div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="标注字段编码" width="124">
          </el-table-column>
          <el-table-column label="标注字段名称" width="186">
            <template #default="scope">
              <span class="label-name" @click="formComponentRead(scope.row)">{{
                scope.row.name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column width="100" label="控件类型">
            <template #default="scope">
              <span class="标注字段名称">{{ ControlTypes[scope.row.type] || "" }}</span>
            </template>
          </el-table-column>
          <el-table-column width="68" label="标签">
            <template #default="scope">
              <span class="标注字段名称">{{
                scope.row.tagList ? scope.row.tagList.toString() : null
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="是否必填" width="96">
            <template #default="scope">
              <el-switch
                class="el-switch-style"
                :disabled="isEdit && isStopOrOn"
                v-model="scope.row.required"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="112">
            <template #default="scope">
              <span class="del-botton" @click="delImageFcList($index, scope)">删除</span>
            </template>
          </el-table-column>
        </el-table>

        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelImageFcList($index)">取 消</el-button>
            <el-button type="primary" @click="confirmImageFcList($index)"
              >确 定</el-button
            >
          </span>
        </template>
      </el-dialog>
    </div>

    <form-component v-model="formComponentVisible" :id="formComponentId"></form-component>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import _ from "lodash";
import { PageType, taskStatus, ControlTypes } from "@/utils/emun";
import { getUrlParams } from "@/utils/window";
import ColorPicker from "vcolorpicker";
import SelectTablePage from "@/components/select-table-page/index.vue";

import {
  formComponentSearch,
  lesionGroupSearch,
  toolSearch,
} from "@/api/projectDetail/projectDetail";

import FormComponent from "@/components/formComponent/formComponent.vue";

//标注组件（小征象）
interface ImageFcList {
  fcId: number; //组件ID
  required: boolean; //是否必填
}
//标注工具
interface ToolItem {
  createTime: number;
  id: number;
  name: string;
  remark: string | null;
  type: number;
  updateTime: number;
  value: string;
}

interface ImageFcListItem {
  code: number | null;
  createTime: number;
  data: number | null;
  editable: number | null;
  id: number | null;
  name: string;
  parameter: number | null;
  type: number | null;
  updateTime: number | null;
}
interface ImageFcListOptionsInfo {
  list: ImageFcListItem[];
  total: number;
}

interface ImageFcListData {}

//病灶设置
interface LesionItem {
  name: string; //病灶名字
  lesionValue: string; //病灶编码(标注类型的值)
  color: string; //颜色
  toolValueList: string[]; //工具编码列表
  toolOptions: ToolOptions[]; //标注工具选项数据
  imageFcListValues: string[]; //标注组件值
  imageFcListOptions: ImageFcListOptions[]; //标注组件选项数据
  imageFcListData: ImageFcListData[]; //标注组件详细数据表格
  initImageFcListData: ImageFcListData[]; //标注组件详细数据表格 初始化数据
  // lesionBizTypes: {name: string, id: number }[]
  // AI: number; //AI
  bizType?: number;
  visible: boolean; //查看组件
}

interface LabelTypeItem {
  createTime: number; //创建时间
  updateTime: number; //更新时间
  id: number;
  name: string; //名称
  value: string; //编码
  color: string; //颜色
  groupFlag: boolean; //是否群组
  remark: string; //备注
  childs?: LabelTypeItem[]; //成员病灶
}

const SOMEPREV = "SOMEPREV";
const ISCONFIRM = "isConfirm";

import Sortable from "sortablejs";
export default {
  components: {
    ColorPicker,
    SelectTablePage,
    FormComponent,
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    lesionBizTypes: {
      type: Array,
      default: [],
    },
  },
  data() {
    const { projectId, projectStatus } = getUrlParams();
    return {
      ControlTypes,
      pageType: projectId && projectId.length === 16 ? PageType.create : PageType.edit,
      projectStatus: projectStatus ? Number(projectStatus) : null,
      projectId,
      lesionList: [],
      model: {
        annoType: [],
      },
      AIList: [{ name: "AI自动生成", id: 1 }],
      // lesionBizTypes: [],
      // bizList: [
      //   {
      //     name: "算法追踪",
      //     id: 1,
      //   },
      // ],
      isActive: true,
      visible: false,
      colorIndex: null,
      on: false,
      lesionGroups: [],
      toolOptions: [],
      formComponentId: "",
      formComponentVisible: false,
    };
  },
  computed: {
    isCreate() {
      return this.pageType === PageType.create;
    },
    isEdit() {
      return this.pageType === PageType.edit;
    },
    isView() {
      return this.pageType === PageType.view;
    },
    // 进行中
    isOn() {
      return taskStatus.way === this.projectStatus;
    },
    // 未发布
    isOff() {
      return taskStatus.off === this.projectStatus;
    },
    // 已完成
    isFinish() {
      return taskStatus.finish === this.projectStatus;
    },
    // 已终结
    isStop() {
      return taskStatus.end === this.projectStatus;
    },
    // 进行中 或者 已终结
    isStopOrOn() {
      return this.isOn || this.isStop;
    },
    colors() {
      return this.lesionList.map((item) => item.color);
    },
  },
  watch: {
    colors: {
      handler: function (newColors, oldColors) {
        const colors = Array.from(new Set(newColors));
        if (colors.length != oldColors.length) {
          const colorIndex = this.colorIndex;
          if (colorIndex === null) return;
          const lesionList = JSON.parse(JSON.stringify(this.lesionList));
          lesionList[colorIndex].color = oldColors[colorIndex];
          this.lesionList = lesionList;
        }
      },
      deep: true,
    },
    lesionList: {
      handler: function (val) {
        const lesionList = JSON.parse(JSON.stringify(val));
        this.$emit("change", lesionList, this.model.annoType);
      },
      deep: true,
    },
    model: {
      handler: function (model) {
        this.$emit("change", this.lesionList, model.annoType);
      },
      deep: true,
    },
  },
  async created() {
    const res = await toolSearch({
      page: 1,
      pageSize: 1000,
    });
    this.toolOptions = res?.data?.list || [];
    const lesionGroups = await this.getLesionGroup();
    this.lesionGroups = lesionGroups;
  },
  methods: {
    // 设置病灶列表
    setLesionList(index, key, value) {
      const lesionList = JSON.parse(JSON.stringify(this.lesionList));
      lesionList[index][key] = value;
      this.lesionList = lesionList;
    },
    visibleChangeImageTools(visible, index, item) {
      if (visible) return;
      this.setLesionList(
        index,
        "toolOptions",
        JSON.parse(JSON.stringify(this.toolOptions))
      );
    },
    filtermethod(value, index, item) {
      const toolOptions: ToolItem[] = JSON.parse(JSON.stringify(this.toolOptions));
      const _imageTools = value
        ? toolOptions.filter((item) => item.name.includes(value))
        : item.toolOptions;
      this.setLesionList(index, "toolOptions", _imageTools);
    },
    async setData(lesionList) {
      const lesionGroups = await this.getLesionGroup();
      this.lesionGroups = lesionGroups;
      this.lesionList = lesionList;
      this.setAnnoType(lesionList);
      this.handleChange();
    },
    async formComponentRead({ id }) {
      this.formComponentId = id;
      this.formComponentVisible = true;
    },
    setAnnoType(lesionList) {
      const annoType = lesionList.map((item) => {
        const { lesionValue } = item;
        const layer1Value = this.getAnnoTypeLayer1Value(lesionValue);
        if (layer1Value) {
          return [layer1Value, lesionValue];
        } else {
          return [lesionValue];
        }
      });
      this.model = {
        ...this.model,
        annoType,
      };
    },

    getAnnoTypeLayer1Value(lesionValue) {
      let value;
      this.lesionGroups.forEach((item) => {
        const { childs } = item;
        if (Array.isArray(childs)) {
          childs.forEach((subItem) => {
            if (subItem.value === lesionValue) {
              value = item.value;
            }
          });
        }
      });
      return value;
    },
    // 获取 标注类型 的列表数据
    async getLesionGroup() {
      const model = {
        page: 1,
        pageSize: 10000,
        name: "",
      };
      const res = await lesionGroupSearch(model);
      const lesionGroups = (res.data.list || []).map((item) => {
        if (!item.childs?.length) {
          delete item.childs;
        }
        return item;
      });
      return lesionGroups;
    },

    // 获取 标注组件选项数据 小征象
    async getImageFcListOptions(options = {}): ImageFcListOptionsInfo {
      const model = {
        page: options.page || 1,
        pageSize: options.pageSize || 10,
        ids: options.id || null,
        // type: options.type || null,
        name: options.value || null,
        // text: options.text || null,
      };
      const res = await formComponentSearch(model);
      return res.data;
    },
    // 设置 整体病症组件数据
    async setImageFcListOptions(options, index) {
      const data: ImageFcListOptionsInfo = await this.getImageFcListOptions(options);
      this.setLesionList(index, "imageFcListOptions", data.list);
      this.setLesionList(index, "imageFcListTotal", data.total);
    },

    //数据不在第一页
    isNotOnePageData(list, values) {
      if (!values || values.length == 0) return false;
      const ids = values
        .filter((value) => value !== SOMEPREV)
        .filter((value) => !list.find((item) => item.id === value));
      return ids.length ? ids : false;
    },
    changeColor(index) {
      this.colorIndex = index;
    },
    validateAnnoType() {
      return new Promise((resolve) => {
        this.$refs.refAnnoType.validate((valid) => {
          resolve(valid);
        });
      });
    },
    delImageFcList(index, scope) {
      if (this.isEdit && this.isStopOrOn) return;
      const { $index } = scope;
      const lesionItem: LesionItem = JSON.parse(JSON.stringify(this.lesionList[index]));
      lesionItem.imageFcListData.splice($index, 1);
      this.setLesionList(index, "imageFcListData", lesionItem.imageFcListData);
    },
    confirmImageFcList(index) {
      const lesionItem: LesionItem = JSON.parse(JSON.stringify(this.lesionList[index]));
      this.setLesionList(
        index,
        "imageFcListValues",
        lesionItem.imageFcListData.map((item) => item.id)
      );
      this.setLesionList(index, "initImageFcListData", lesionItem.imageFcListData);
      this.setLesionList(index, "visible", false);
    },
    cancelImageFcList(index) {
      const lesionItem: LesionItem = JSON.parse(JSON.stringify(this.lesionList[index]));
      this.setLesionList(index, "imageFcListData", lesionItem.initImageFcListData);
      this.setLesionList(index, "visible", false);
    },

    del({ $index, row }) {
      this.lesionList.splice($index, 1);
      const annoType = this.model.annoType.filter((item, index) => index !== $index);
      this.model = {
        ...this.model,
        annoType,
      };
    },

    // 设置查看组件数据
    async setImageFcListData(index: number, imageFcListValues: number[], requiredList) {
      if (imageFcListValues.length) {
        const res = await formComponentSearch({ ids: imageFcListValues });
        const { imageFcListData } = this.lesionList[index];
        const newImageFcListData = imageFcListValues.map((id, index) => {
          const item = imageFcListData.find((subItem) => subItem.id == id);
          const resItem = res.data.list.find((listItem) => listItem.id == id);
          return {
            required: requiredList ? requiredList[index] : false,
            ...item,
            ...resItem,
          };
        });
        console.log(newImageFcListData, "newImageFcListData");
        this.setLesionList(index, "imageFcListData", newImageFcListData);
        this.setLesionList(
          index,
          "initImageFcListData",
          JSON.parse(JSON.stringify(newImageFcListData))
        );
      } else {
        this.setLesionList(index, "imageFcListData", []);
      }
    },
    // 表格添加拖动事件
    addSortable(index) {
      setTimeout(() => {
        const ref = this.$refs[`refTable${index}`];
        if (!ref) return;
        const el = ref[index].$el.querySelectorAll(".el-table__body tbody")[0];
        Sortable.create(el, {
          setData: function (dataTransfer) {
            dataTransfer.setData("Text", "");
          },
          onEnd: (e) => {
            const targetItem = this.lesionList[index].imageFcListData.splice(
              e.oldIndex,
              1
            )[0];
            this.lesionList[index].imageFcListData.splice(e.newIndex, 0, targetItem);
          },
        });
      });
    },
    //点击查看组件
    async checkImageFcList({ $index, row }) {
      this.setLesionList($index, "visible", true);
      this.addSortable($index);
    },

    async handleChange(labelTypeValue = this.model.annoType) {
      if (!Array.isArray(labelTypeValue)) return;
      const currnetLesionList = this.lesionList || [];
      const newLesionList: LesionItem = new Array(labelTypeValue.length);
      const imageFcListOptionsInfo: ImageFcListOptionsInfo = await this.getImageFcListOptions();
      for (let i = 0; i < labelTypeValue.length; i++) {
        const toolOptions: ToolItem[] = JSON.parse(JSON.stringify(this.toolOptions));
        const values = labelTypeValue[i];
        const lesionValue = values.length == 2 ? values[1] : values[0];
        const currnetItem =
          currnetLesionList.find((item) => item.lesionValue === lesionValue) || {};

        const LabelTypeItem: LabelTypeItem =
          (await this.getLabelTypeItem(lesionValue)) || {};
        const color = LabelTypeItem.color || this.getColor(newLesionList);

        const imageFcListValues = currnetItem.imageFcList
          ? (currnetItem.imageFcList || []).map((item) => item.fcId)
          : currnetItem.imageFcListValues || [];

        const lesionItem: LesionItem = {
          lesionValue: currnetItem.lesionValue || lesionValue, //病灶编码(标注类型的值)
          name: currnetItem.name || LabelTypeItem.name, //病灶名字
          color: currnetItem.color || color, //颜色
          toolValueList: currnetItem.toolValueList || [], //工具编码列表
          toolOptions: currnetItem.toolOptions || toolOptions, //标注工具选项数据
          imageFcListValues: imageFcListValues, //标注组件值
          imageFcListOptions:
            currnetItem.imageFcListOptions || imageFcListOptionsInfo.list, //标注组件选项数据
          imageFcListTotal: currnetItem.imageFcListTotal || imageFcListOptionsInfo.total,
          imageFcListData: currnetItem.imageFcListData || [], //标注组件详细数据表格
          initImageFcListData: currnetItem.initImageFcListData || [], //标注组件详细数据表格 初始化数据
          AI: 1,
          visible: false,
          lesionBizTypes: _.cloneDeep(this.$props.lesionBizTypes),
          bizType: currnetItem.bizType || undefined,
        };
        newLesionList[i] = lesionItem;
      }
      this.lesionList = newLesionList;
      for (let i = 0; i < this.lesionList.length; i++) {
        const { imageFcListValues, lesionValue } = this.lesionList[i];
        const currnetItem =
          currnetLesionList.find((item) => item.lesionValue === lesionValue) || {};
        const requiredList = currnetItem.imageFcList
          ? currnetItem.imageFcList.map((item) => item.required)
          : imageFcListValues.map((item) => false);
        await this.setImageFcListData(i, imageFcListValues, requiredList);
      }
    },
    // 获取标注类型的数据
    async getLabelTypeItem(lesionValue): LabelTypeItem {
      let labelTypeItem: LabelTypeItem;
      const lesionGroups = this.lesionGroups.length
        ? this.lesionGroups
        : await this.getLesionGroup();
      lesionGroups.forEach((item: LabelTypeItem) => {
        if (labelTypeItem) return;
        const { childs } = item;
        if (item.value === lesionValue) {
          labelTypeItem = item;
        }
        if (Array.isArray(childs)) {
          childs.forEach((subItem: LabelTypeItem) => {
            if (subItem.value === lesionValue) {
              labelTypeItem = subItem;
            }
          });
        }
      });
      return labelTypeItem;
    },
    // 选择标注工具
    changeImageTools(index) {
      if (index == 0) return;
      const item = this.lesionList[index];
      const isSomePrev = item.toolValueList.some((value) => value == SOMEPREV);
      if (isSomePrev) {
        const toolValueList = JSON.parse(
          JSON.stringify(this.lesionList[index - 1].toolValueList)
        );
        this.setLesionList(index, "toolValueList", toolValueList);
      }
    },
    // 增加"同上一个病灶"在标注工具数据的头部
    handleImageTools(index, toolOptions) {
      if (!Array.isArray(toolOptions)) return [];
      const tools = JSON.parse(JSON.stringify(toolOptions));
      if (index !== 0) {
        tools.unshift({
          name: "同上一个病灶",
          value: SOMEPREV,
        });
      }
      return tools;
    },
    // 标注组件的值发生变化
    async changeImageFcListValues(imageFcListValues, index, row) {
      const isSomePrev = row.imageFcListValues.some((value) => value == SOMEPREV);
      if (isSomePrev) {
        const prevLesionItem: LesionItem = JSON.parse(
          JSON.stringify(this.lesionList[index - 1])
        );
        this.setLesionList(index, "imageFcListValues", prevLesionItem.imageFcListValues);
        this.$refs["refImageFcList" + index].setValue(prevLesionItem.imageFcListValues);
        this.setLesionList(index, "imageFcListData", prevLesionItem.imageFcListData);
        this.setLesionList(
          index,
          "initImageFcListData",
          prevLesionItem.initImageFcListData
        );
      } else {
        const _imageFcList = imageFcListValues.includes(SOMEPREV)
          ? row.imageFcListValues
          : imageFcListValues;
        this.setLesionList(index, "imageFcListValues", _imageFcList);
        this.$refs["refImageFcList" + index].setValue(_imageFcList);
        this.setImageFcListData(index, this.lesionList[index].imageFcListValues);
      }
      // const { imageFcListOptions } = this.lesionList[index];
      // const ids = this.isNotOnePageData(imageFcListOptions, this.lesionList[index].imageFcListValues);
      // if( ids ){
      //   const res = await formComponentSearch({ ids });
      //   res.list.forEach(item=> {
      //     item.className = "el-select-item-hide hide"
      //   })
      //   res.list.forEach(item=> {
      //     if( imageFcListOptions.findIndex(subItem=> subItem.id == item.id) == -1 ){
      //       imageFcListOptions.push(item);
      //     }
      //   })
      //   // this.$set(this.lesionList[index], 'imageFcListOptions', imageFcListOptions);
      //   this.setLesionList(index, 'imageFcListOptions', imageFcListOptions);
      //   setTimeout(()=>{
      //     //  this.$set(this.lesionList[index], 'imageFcListValues', JSON.parse(JSON.stringify(this.lesionList[index].imageFcListValues)));
      //      this.setLesionList(index, 'imageFcListValues', JSON.parse(JSON.stringify(this.lesionList[index].imageFcListValues)));
      //   },0)
      // }
    },
    // 增加"同上一个病灶"在标注组件数据的头部
    handleSeriesFcListData(index, imageFcListOptions) {
      if (!imageFcListOptions) return [];
      const seriesData = JSON.parse(JSON.stringify(imageFcListOptions));
      if (index !== 0) {
        seriesData.unshift({
          name: "同上一个病灶",
          id: SOMEPREV,
        });
      }
      return seriesData;
    },

    openContent() {
      this.isActive = !this.isActive;
    },
    // 递归获取随机颜色，避免随机颜色重复
    getColor(list) {
      const color = this.getRandomColor();
      const tableList = list || this.lesionList;
      const index = tableList.findIndex((item) => {
        return item && item.color == color;
      });
      return index == -1 ? color : this.getColor(tableList);
    },
    // 获取随机颜色
    getRandomColor() {
      let color = "#";
      let randomArr = [
        "0",
        "1",
        "2",
        "3",
        "4",
        "5",
        "6",
        "7",
        "8",
        "9",
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
      ];
      for (let i = 0; i < 6; i++) {
        color += randomArr[parseInt(Math.random() * 15)];
      }
      return color;
    },

    // 病灶设置改变方法
    handleBizTypeChange(val, index) {
      this.lesionList.map((item) => (item.bizType = undefined));
      const item = this.lesionList[index];
      item.bizType = val;
      this.setLesionList(index, "bizType", val);
    },
  },
};
</script>

<style lang="less">
.layout {
  .layout-item {
    margin-bottom: 12px;
    padding: 0 16px;
    box-sizing: border-box;
    background: #fafafa;
    .layout-header {
      width: 100%;
      height: 50px;
      background: #fafafa;
      display: flex;
      align-items: center;
      cursor: pointer;
      box-sizing: border-box;
      .icon-triangle {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 5px 0 5px 7px;
        border-color: transparent transparent transparent #448e97;
      }
      .title {
        font-weight: 700;
        font-size: 14px;
        color: #333333;
        margin-left: 10px;
      }
    }
    &.active {
      .layout-header {
        .icon-triangle {
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 7px 5px 0 5px;
          border-color: #448e97 transparent transparent transparent;
        }
      }
      .layout-content {
        display: block;
      }
    }

    .layout-content {
      display: none;
      background: #fafafa;

      .layout-type {
        .el-select {
          .select-trigger {
            .el-select__input {
              min-width: 5px;
            }
          }
        }
      }
      .handle {
        .el-button {
          border: none;
          padding: 7px 7px 15px 0;
          background-color: transparent;
          &::hover {
            background: transparent;
          }
          span {
            color: #448e97;
          }
        }
        .remove:hover span {
          text-decoration: underline;
        }
      }
    }
  }

  .el-table {
    .el-table__header-wrapper {
      thead {
        tr th {
          background: #eee;
        }
      }
    }
    .el-table__body-wrapper {
      tr td {
        background: #fafafa;
      }
      tr:last-child td {
        border: none;
      }
    }
  }
}
.el-color-picker {
  height: auto;
  .el-color-picker__trigger {
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 2px;
  }
  .el-color-picker__color,
  .el-color-picker__color-inner {
    border: none;
    border-radius: 2px;
  }
  .el-icon-close:before,
  .el-icon-arrow-down:before {
    display: none;
  }
}

.el-color-dropdown {
  .el-color-dropdown__link-btn {
    display: none;
  }
}

.color-container {
  width: 32px;
  height: 32px;
  position: relative;
  text-align: left;
  .color {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }
  .el-color-picker {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    .el-color-picker__trigger {
      padding: 0;
    }
  }
}
</style>
